/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="page-cluster-deploy__server-detail">
        <div class="detail-wrap">
            <div class="header">
                <img src="/static/img/server_normal.svg" alt>
                <span>
                    <lang>管理节点（{{info.name}}）</lang>
                </span>

                <!-- i class="iconfont iconsip-edit" @click="editFrom"></i -->
            </div>
            <div class="main">
                <div v-for="item in infoList" :key="item.label" class="info-item">
                    <span class="info-label">{{ item.label }} :</span>
                    <span
                        v-if="!item.isPassword"
                        class="info-value"
                        :title="item.value"
                    >{{ item.value }}</span>
                    <password-item v-else class="info-value" v-model="item.value"/>
                </div>
            </div>
        </div>
        <slot></slot>
    </div>
</template>

<script>
import PasswordItem from "../password_item.vue";

const FIELD_LIST = [
    { label: _("主机名"), key: "hostName" },
    { label: _("操作系统"), key: "os" },
    { label: _("管理IP"), key: "mnIp" },
    { label: _("CPU"), key: "cpuCores", format: "{0} 核" },
    { label: _("数据/业务IP"), key: "dnIp" },
    { label: _("内存"), key: "memorySize", format: "{0}GB" },
    { label: _("用户名"), key: "userName" },

    // 20190426后台约束好 SSD 和HDD 的单位是 T (后台那边做单位转换)
    { label: _("SSD容量"), key: "ssdSize", format: "{0}TB" },
    { label: _("密码"), key: "password", isPassword: true },
    { label: _("HDD容量"), key: "hddSize", format: "{0}TB" }
];

export default {
    components: {
        PasswordItem
    },

    data() {
        return {
            info: {
                id: 0, // 节点id
                name: "节点1", // 节点名称
                hostName: "Sangfor.com", // 主机名
                dnIp: "1.1.1.1", // 数据/业务ip
                mnIp: "2.2.2.2", // 管理ip
                userName: "", // 用户名
                password: "", // 密码
                os: "Cent OS", // 操作系统
                cpuCores: 0, // cpu核数
                memorySize: 0, // 内存大小
                ssdSize: 0, // ssd存储大小
                hddSize: 0 // hdd存储大小
            }
        };
    },

    computed: {
        infoList() {
            let vm = this;
            return this.fieldList.map(item => ({
                ...item,
                value: vm.info[item.key]
                    ? (item.format && _(item.format, vm.info[item.key])) ||
                      vm.info[item.key]
                    : "-"
            }));
        },

        fieldList() {
            return FIELD_LIST;
        }
    },

    methods: {
        editFrom() {
            // TODO: 未完成
        }
    }
};
</script>

<style lang="less">
.page-cluster-deploy__server-detail {
    font-size: 11px;
    width: 100%;
    height: 100%;
    padding: 0 20px 10px 20px;

    .detail-wrap {
        width: 100%;
        overflow: hidden;

        @headerHeight: 40px;
        .header {
            font-size: 14px;
            line-height: @headerHeight;
            height: @headerHeight;
            border-bottom: 1px dashed #dddddd;
            clear: left;

            > * {
                vertical-align: middle;
            }

            img {
                height: 1em;
                margin-right: 0.5em;
            }

            .iconsip-edit {
                font-size: 14px;
                color: #4d8dd9;
                float: right;
                cursor: pointer;
            }
        }

        .main {
            padding: 10px;

            @itemHeight: 30px;
            .info-item {
                height: @itemHeight;
                line-height: @itemHeight;
                width: 50%;
                float: left;

                .info-label {
                    display: inline-block;
                    color: #999;
                    width: 7em;
                    float: left;
                }

                .info-value {
                    display: inline-block;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    width: calc(100% - 7em);
                    padding-right: 1em;
                    height: 100%;
                }
            }
        }
    }
}
</style>
